<template>
	<div class="yingmoo-column yingmoo-search">
		<div class="column-left">
			<div class="column-navbar">
				<h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">鹰目搜索</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
			</div>
			<form class="column-form">
				<div class="form-row">
					<label>地区：</label>
					<select id="area" class="sel">
					  <option selected="selected" value="">请选择地区</option>
					  <option v-for="area in areaList" :key="area.value" :value="area.value">{{area.text}}</option>
					</select>
				</div>
				<div class="form-row">
					<label>类型：</label>
					<select id="cate" class="sel" @change="getSelectValue">
					  <option selected="selected" value="">请选择类型</option>
					  <option v-for="cate in cateList" :key="cate.value" :value="cate.value">{{cate.text}}</option>
					</select>
				</div>
				<div class="form-row">
					<label>形式：</label>
					<select id="cate2" class="sel">
					  <option selected="selected" value="">请选择形式</option>
					  <option v-for="cate2 in cateList2" :key="cate2.value" :value="cate2.value">{{cate2.text}}</option>
					</select>
				</div>
				<div class="form-row">
					<label>周期：</label>
					<select class="sel">
					  <option selected="selected">请选择周期</option>
					  <option>一~两个月</option>
					  <option>两~三个月</option>
					  <option>三~四个月</option>
					  <option>四~五个月</option>
					  <option>半年~一年</option>
					</select>
				</div>
				<div class="form-row">
					<label>关键字：</label>
					<input id="key" type="text" placeholder="请选择关键字">
				</div>
				<div class="btn-row">
					<button type="button" class="btn-search" @click="toMediaListPage">立即搜索</button>
				</div>
			</form>
		</div>
		<el-tabs class="column-content" v-model="active" type="card" @tab-click="handleClick">
			<el-tab-pane class="column-list" label="您也许感兴趣" name="first">
				<li class="list-item" v-for="(v, i) in list1" :key="i">
					<figure class="list-img"><img :src="v.imgpath" /></figure>
					<p class="list-name" :title='v.name'>{{v.name}}</p>
					<p class="list-price">￥{{v.price}}</p>
				</li>
			</el-tab-pane>
			<el-tab-pane class="column-list" label="新位置推荐" name="second">
				<li class="list-item" v-for="(v, i) in list2" :key="i">
					<figure class="list-img"><img :src="v.imgpath" /></figure>
					<p class="list-name" :title='v.name'>{{v.name}}</p>
					<p class="list-price">￥{{v.price}}</p>
				</li>
			</el-tab-pane>
			<el-tab-pane class="column-list" label="热点好评" name="third">
				<li class="list-item" v-for="(v, i) in list3" :key="i">
					<figure class="list-img"><img :src="v.imgpath" /></figure>
					<p class="list-name" :title='v.name'>{{v.name}}</p>
					<p class="list-price">￥{{v.price}}</p>
				</li>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				requestAddr:this.GLOBAL.addr,
				active: 'first',
				list1: [],
				list2: [],
				list3: [],
				cateList:[],
				cateList2:[],
				areaList:[],
				params:{}
			}
		},
		mounted() {
			this.getSearchList(4); //鹰目搜索的感兴趣
			this.getSearchList(5); //鹰目搜索的新位置推荐
			this.getSearchList(6); //鹰目搜索的热点好评
			this.getCateList('');
			this.getAreaList('');
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getSearchList: function(adid) {
				this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid=' + adid + '&limit=8',
					method: 'JSONP',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					jsonp: 'callbackparam'
				}).then(res => {
					if(res.data != null) {
						if(adid == 4) {
							this.list1 = res.data;
						}
						if(adid == 5) {
							this.list2 = res.data;
						}
						if(adid == 6) {
							this.list3 = res.data;
						}
					}
				}).catch()
			},
	    	getSelectValue:function(){
	    		var code = document.getElementById('cate').value;
	    		this.getCateList(code);
	    	},
	    	//获取分类信息
	    	getCateList:function(code){
	    		this.$http.post(this.requestAddr+"/GetJson/getCategoryList",{"parentCode":code},{emulateJSON: true}).then(
	    			(res)=>{
	    				if(code == null || code == ''){
	    					this.cateList = res.data.result;
						}else if(code != null && code.length == 4){
							this.cateList2 = res.data.result;
						}
	    			}
	    		)
	    	},
	    	getAreaList:function(areaCode){
				this.$http.post(this.requestAddr+"/GetJson/getAreaList",{"parentCode":areaCode},{emulateJSON: true}).then(
					(res)=>{
						this.areaList = res.data.result;
					}
				);
			},
			toMediaListPage:function(){
				var cate1 = document.getElementById("cate").value;
				var cate2 = document.getElementById("cate2").value;
				this.params.mediaArea = document.getElementById("area").value;
				this.params.categoryCode = ((cate2==''||cate2==null)?cate1:cate2);
				this.params.key = document.getElementById("key").value;

				sessionStorage.setItem("params",JSON.stringify(this.params));
				window.location.href = "../#/ymList"
			}
		}
	}
</script>

<style scoped lang="less">
	.yingmoo-search {
		.column-left {
			background-color: #036eb7;
			.form-row {
				height: 24px;
				padding-top: 14px;
				label {
					float: left;
					display: block;
					width: 68px;
					line-height: 24px;
					color: white;
					font-size: 14px;
					padding-right: 2px;
					text-align: right;
				}
				.sel {
					float: left;
					width: 170px;
					height: 100%;
					border: 0 none;
					background-color: white;
					padding: 0 5px;
          outline: none;
				}
        input {
					float: left;
					width: 160px;
					height: 100%;
					border: 0 none;
					background-color: white;
					padding: 0 5px;
          outline: none;
				}
			}
			.btn-row {
				padding-top: 17px;
				padding-left: 70px;
				.btn-search {
					width: 114px;
					height: 24px;
					border: 0 none;
					background-color: #f29600;
					color: white;
					font-size: 14px;
				}
			}
		}
		.column-content {
			margin-left: 247px;
		}
		.column-list {
			height: 250px;
			display: flex;
			.list-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				line-height: 15px;
        .list-name{
          width: 213px;
          height: 17px;
          text-align: center;
          overflow: hidden;
          text-overflow: clip;
        }
				.list-img img {
          position: relative;
          top: 0;
					width: 216px;
					height: 153px;
				}
        .list-price{
          color: red;
        }
				p {
					padding-top: 7px;
				  font-size: 14px;
				}
			}
		}
	}
</style>
